<template>
    <div class="pin-input">
        <n-input v-model:value="modelValue" placeholder="Please select a pin" readonly @focus="showList = true" />
        <n-list class="selectlist" v-show="showList" hoverable clickable>
            <n-list-item v-for="pin in pinInfos" :key="pin.Name" @click="modelValue = pin.Name;showList = false">
                <span>{{ `${pin.Name} ${pin.Direction == 0? 'IN' : 'OUT'} BitSize:${pin.BitSize}` }}</span>
            </n-list-item>
        </n-list>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { NInput,NList,NListItem } from 'naive-ui';
import { pins } from '../../../wailsjs/go/models';

const modelValue = defineModel<string>()
const showList = ref(false)

const props = defineProps<{
    pinInfos: Set<pins.PinDef>,
}>()
</script>
<style lang="scss" scoped>
.pin-input {
    position:sticky;
    z-index: 990;
    width: 100%;
    .selectlist {
        position: sticky;
        z-index: 999;
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        background-color: var(--vt-c-white);
        border: 1px solid var(--fv-c-light-back);
        border-radius: 4px;
    }
}

</style>